<template>
  <div class="tab">
    <div
      class="item"
      v-for="(item, index) in tabs"
      :key="index"
      :style="{ width: itemWidth }"
      @click="change(index, item)"
    >
      <span class="name" :class="{active: current === index}">{{ item.name }}</span>
    </div>

    <div
      class="line-wrap"
      :style="{
        width: itemWidth,
        bottom: lineBottom,
        transform: `translateX(${current}00%)`,
      }"
    >
      <div class="line" :style="lineStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tab",
  props: {
    tabs: Array,
    lineBottom: {
      type: String,
      default: '8px'
    },
    lineStyle: Object
  },
  computed: {
    itemWidth() {
      return `${100 / this.tabs.length}%`;
    },
  },
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    change(index, item) {
      this.current = index
      this.$emit('change', {item, index})
    }
  },
};
</script>

<style lang="scss" scoped>
.tab {
  height: 45px;
  line-height: 45px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  box-sizing: border-box;
  position: relative;

  .item {
    text-align: center;
    box-sizing: border-box;

    .name {
      color: #666;
      font-size: 13px;

      &.active {
        color: #333;
      }
    }
  }

  .line-wrap {
    height: 3px;
    position: absolute;
    transition: all .3s;

    .line {
      width: 30px;
      height: 100%;
      margin: auto;
      background: #2D8CF0;
    }
  }
}
</style>
